<template>
	<view class="box">
		<image class="img" :src="notice.imageSrc" mode="aspectFill"></image>
		<view class="navigation-top">
			<image class="back" @click="back" src="../../static/images/left.png" mode=""></image>
			<view class="title">
				公告详情
			</view>
		</view>
		<view class="top">
			<view class="avatar-box">
				<image class="avatar" :src="getimageBaseUrl(getAvatar(this.id))" mode="scaleToFill"></image>
			</view>
			<view class="right">
				<view class="community-time">
					<view class="community">{{auth.community}}</view>
					<view class="time">{{notice.updateTime}}</view>
				</view>
				<view class="auth"> 
					{{'作者：'+ auth.authName}}
				</view>
				<view class="digest">
					<view class="digest-txt">摘要：</view>
					<view class="digest-content">{{notice.digest}}</view>
				</view>
			</view>
		</view>
		<view class="content">
			{{notice.content}}
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			this.id = option.id
			this.getNoticeDetail();
		},
		data() {
			return {
				id: 0,
				notice: {},
				auth: '',
			}
		},

		methods: {
			// 返回上一个页面
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 公告作者  管理员所在的社

			//获取公告详细信息
			getNoticeDetail() {
				this.$request({
					url: `${this.$baseUrl}/notice/getNotice?id=${this.id}`
				}).then(res => {
					this.notice = res.data.data
					this.getAuthName();
				}).catch(res => {
					console.log(res)
				})
			},
			getAuthName() {
				this.$request({
					url: `${this.$baseUrl}/notice/auth?id=${this.notice.publishUser}`
				}).then(res => {

					this.auth = res.data.data
					//console.log(this.notice.publishUser)
				}).catch(res => {
					console.log(res)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		position: relative;
		padding-bottom: 40rpx;

		.img {
			width: 750rpx;
			height: 566rpx;
			opacity: 1;
		}

		.navigation-top {
			position: absolute;
			top: 108rpx;
			height: 52rpx;
			display: flex;
			width: 686rpx;
			margin-left: 32rpx;
			align-items: center;

			.back {
				width: 48rpx;
				height: 48rpx;
			}

			.title {
				font-size: 36rpx;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 0px;
				color: rgba(255, 255, 255, 1);
				margin-left: 224rpx;
			}
		}

		.top {
			margin-top: 16rpx;
			margin-left: 32rpx;
			display: flex;

			.avatar-box {
				width: 144rpx;
				height: 144rpx;
				border: 6rpx solid #FFFFFF;
				box-shadow: 0 4rpx 4rpx 0 #afafaf;
				transform: translateY(-72rpx);
				border-radius: 100%;

				.avatar {
					width: 144rpx;
					height: 144rpx;
					border-radius: 100%;


				}
			}

			.right {
				width: 100%;
				margin-left: 16rpx;

				.community-time {
					display: flex;
					align-items: center;
					height: 46rpx;
					padding-right: 32rpx;

					.community {
						font-size: 32rpx;
						font-weight: 600;
						letter-spacing: 0px;
						line-height: 0px;
						color: rgba(51, 51, 51, 1);
					}

					.time {
						margin-left: 24rpx;
						font-size: 24rpx;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 18px;
						color: rgba(153, 153, 153, 1);
						text-align: left;
					}
				}
				.auth {
					margin-top: 6rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(102, 102, 102, 1);
				}

				.digest {
					display: flex;
					height: 80rpx;
					align-items: center;

					.digest-txt {
						font-size: 28rpx;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 0px;
						color: rgba(153, 153, 153, 1);
					}

					.digest-content {
						border: 1px solid rgba(52, 125, 250, 1);
						border-radius: 24rpx;
						padding: 6rpx 20rpx;
						font-size: 20rpx;
						color: rgba(52, 125, 250, 1);
					}
				}
			}
		}

		.content {
			text-indent: 2em;
			margin-top: 10rpx;
			width: 686rpx;
			padding: 4rpx 2rpx;
			margin-left: 32rpx;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 46rpx;
			color: rgba(102, 102, 102, 1);
		}

	}
</style>
